<template>
  <Panel>
    <template #title>商品列表</template>
    <template>
      <!-- 表格 -->
      <el-table :data="tableData" style="width: 100%" size="mini">
        <el-table-column type="expand">
          <!-- 展开行 -->
          <template v-slot="{ row }">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="商品id :">
                <span>{{ row.id }}</span>
              </el-form-item>
              <el-form-item label="所属分类 :">
                <span>{{ row.category }}</span>
              </el-form-item>
              <el-form-item label="商品图片 :">
                <!-- <span>{{ baseUrl + row.imgUrl }}</span> -->
                <el-avatar
                  shape="square"
                  :size="50"
                  :src="baseUrl + row.imgUrl"
                >
                </el-avatar>
              </el-form-item>
              <el-form-item label="商品评价 :">
                <span>{{ row.rating }}</span>
              </el-form-item>
              <el-form-item label="商品描述 :">
                <span>{{ row.goodsDesc }}</span>
              </el-form-item>
              <el-form-item label="商品名称 :">
                <span>{{ row.name }}</span>
              </el-form-item>
              <el-form-item label="商品价格 :">
                <span>{{ row.price }}</span>
              </el-form-item>
              <el-form-item label="创建时间 :">
                <span>{{ row.ctime | format }}</span>
              </el-form-item>
              <el-form-item label="商品销量 :">
                <span>{{ row.sellCount }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <!-- 一级大纲 -->
        <el-table-column label="商品名称" prop="name"> </el-table-column>
        <el-table-column label="所属分类" prop="category"> </el-table-column>
        <el-table-column label="商品价格" prop="price"> </el-table-column>
        <el-table-column label="商品图片" prop="imgUrl">
          <template v-slot="{ row }">
            <el-avatar shape="square" :size="50" :src="baseUrl + row.imgUrl">
            </el-avatar>
          </template>
        </el-table-column>
        <el-table-column label="商品描述" prop="goodsDesc"> </el-table-column>
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <el-button type="primary" size="mini" @click="goodsShow(row)"
              >编辑</el-button
            >
            <el-button type="danger" size="mini" @click="delGoods(row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
      <!-- 编辑弹框 -->
      <el-dialog title="提示" :visible.sync="dialogVisible" width="50%">
        <div>
          <!-- 编辑商品 -->
          <el-form ref="form" :model="form" label-width="80px" size="mini">
            <el-form-item label="商品名称">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="活动分类">
              <el-input v-model="form.category"></el-input>
            </el-form-item>
            <el-form-item label="商品价格">
              <el-input v-model="form.price"></el-input>
            </el-form-item>
            <el-form-item label="商品图片">
              <template>
                <el-upload
                  class="avatar-uploader"
                  action="http://127.0.0.1:5000/goods/goods_img_upload"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
                >
                  <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </template>
            </el-form-item>
            <el-form-item label="商品描述">
              <el-input type="textarea" v-model="form.goodsDesc"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="editGoodsNow">确 定</el-button>
        </span>
      </el-dialog>
    </template>
  </Panel>
</template>

<script>
import { getGoods, delGoods, editGoods } from '../../api/goods.js'
export default {
  created() {
    this.getGoodsList()
  },
  data() {
    return {
      dialogVisible: false,
      baseUrl: 'http://127.0.0.1:5000/upload/imgs/goods_img/',
      currentPage: 1,
      total: 0,
      pageSize: 5,
      tableData: [],
      imageUrl: '',
      form: {
        name: '',
        desc: '',
        price: '',
        region: []
      }
    }
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
      this.form.imgUrl = res.imgUrl
      // console.log(this.imgUrl)
    },
    // 验证图片格式
    beforeAvatarUpload(file) {
      // const isJPG = file.type === 'image/jpeg'
      const arr = ['image/jpeg', 'image/png', 'image/gif', 'image/webp']
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!arr.includes(file.type)) {
        this.$message.error('上传头像图片不符合!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return arr.includes(file.type) && isLt2M
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`)
      this.pageSize = val
      this.getGoodsList()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`)
      this.currentPage = val
      this.getGoodsList()
    },
    // 获取列表
    async getGoodsList() {
      const { data, total } = await getGoods({
        currentPage: this.currentPage,
        pageSize: this.pageSize
      })
      // console.log(data)
      this.tableData = data
      this.total = total
      // console.log(this.tableData)
    },
    // 删除商品
    delGoods(id) {
      this.$confirm('此操作将永久该商品, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          // 删除成功的回调
          const { code, msg } = await delGoods({ id })
          // console.log(data)
          if (code === 0) {
            this.$message.success(msg)
            this.getGoodsList()
          } else {
            this.$message.error(msg)
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 数据回显
    goodsShow(row) {
      this.form = { ...row }
      console.log(this.form)
      this.imageUrl = this.baseUrl + row.imgUrl
      this.dialogVisible = true
    },
    // 修改商品
    async editGoodsNow() {
      const { code, msg } = await editGoods({
        name: this.form.name,
        category: this.form.category,
        price: this.form.price,
        imgUrl: this.form.imgUrl,
        goodsDesc: this.form.goodsDesc,
        id: this.form.id
      })
      if (code === 0) {
        this.$message.success(msg)
        this.getGoodsList()
        this.dialogVisible = false
      } else {
        this.$message.error(msg)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.el-input {
  width: 200px;
}
/deep/ textarea {
  width: 400px;
  height: 80px;
  resize: none;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
}
.avatar {
  width: 50px;
  height: 50px;
  display: block;
}
</style>
